<template>
    <div class="userInfo">

        <el-card class="info-box-card">
            <el-form label-width="80px" :model="form" ref="form">
                <el-form-item class="label1" label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item class="label2" label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item class="label3" label="确认密码" prop="confirmPassword">
                    <el-input type="password" v-model="form.confirmPassword"></el-input>
                </el-form-item>

                <!-- <el-form-item class="label4" label="设置头像" prop="avatar">
                    <el-upload class="avatar-uploader" action="https://localhost:8000/"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item> -->

                <el-form-item prop="password">
                    <el-button class="loginbutton" @click="reset">重置</el-button>
                    <el-button class="registerbutton" type="primary" @click="commitInfo">设置完成</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</template>

<script>
export default {
    components: {

    },
    
    data() {
        return {
            form: {
                username: "",
                password: "",
                confirmPassword: "",
                email:"",
            }
        }
    },

    created(){
        console.log("邮箱为"+this.$route.params.email)
    },

    methods: {
        reset() {
            this.form.username = "";
            this.form.password = "";
            this.form.confirmPassword = ""
        },
        commitInfo() {
            if(this.form.password!=this.form.confirmPassword){
                this.$message.error("两次输入的密码不一样，请重试")
                return 
            }

            this.$axios({
                method: "post",
                url: "http://localhost:8000/register/setUser",
                data: {
                    username:this.form.username,
                    password:this.form.password,
                    email:this.$route.params.email,
                }
            }).then((res) => {
                console.log(res);
                this.$router.push('/login')
            }).catch(err => {
                console.log(err)
            })
        }





        // handleAvatarSuccess(res, file) {

        //     this.imageUrl = URL.createObjectURL(file.raw);
        // },
        // beforeAvatarUpload(file) {

        //     const isJPG = file.type === 'image/jpeg';
        //     const isLt2M = file.size / 1024 / 1024 < 2;

        //     if (!isJPG) {
        //         this.$message.error('上传头像图片只能是 JPG 格式!');
        //     }
        //     if (!isLt2M) {
        //         this.$message.error('上传头像图片大小不能超过 2MB!');
        //     }
        //     return isJPG && isLt2M;
        // }
    }

}
</script>

<style lang="scss">
.userInfo {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;

    .info-box-card {
        width: 450px;
        margin: 0 auto;

        .label1 {
            position: relative;
            right: 20px;
        }

        .label2 {
            position: relative;
            right: 20px;
        }

        .label3 {
            position: relative;
            right: 20px;
        }

        .label4 {
            position: relative;
            right: 20px;
        }

        .loginbutton {
            position: relative;
            right: 60px;
        }
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>